import { createRouter, createWebHistory } from 'vue-router'
import buttonCmp from '../components/Buttons/ButtonCmp.vue'
import horizontalContainer from '../components/containers/HorizontalContainer.vue'
import verticalContainer from '../components/containers/VerticalContainer.vue'
import verticalReverse from '../components/containers/VerticalReverse.vue'
import borderCmp from '../components/borders/BorderCmp.vue'
import formCmp from '../components/forms/FormCmp.vue'
import containerCmp from '../components/basic/container/ContainerCmp.vue'
import layoutJustifyCmp from '../components/basic/layout/LayoutJustifyCmp.vue'
import layoutRowCmp from '../components/basic/layout/LayoutRowCmp.vue'
import layoutGutterCmp from '../components/basic/layout/LayoutGutterCmp.vue'
import layoutGutterMixCmp from '../components/basic/layout/LayoutGutterMixCmp.vue'
import layoutOffsetCmp from '../components/basic/layout/LayoutOffsetCmp.vue'
import layoutXsSmMdLgXl from '../components/basic/layout/LayoutXsSmMdLgXl.vue'
import loginCmp from '../components/login/LoginCmp.vue'
import flexLayout from '../components/flexlayout/FlexLayout.vue'
import plotlyCmp from '../components/plotlys/PlotlyCmp.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
    path: '/flexLayout',
    name: 'flexLayout布局入门',
    component: flexLayout,
   }, 
    {
      path: '/loginCmp',
      name: '登录',
      component: loginCmp,
    },
    {
      path: '/buttonCmp',
      name: '按钮组件测试',
      component: buttonCmp,
    },
    {
      path: '/horizontalContainer',
      name: 'horizontalContainer布局',
      component: horizontalContainer,
    },
    {
      path: '/verticalContainer',
      name: 'verticalContainerb布局',
      component: verticalContainer,
    },
    {
      path: '/verticalReverse',
      name: 'verticalReverse布局',
      component: verticalReverse,
    },
    {
      path: '/borderCmp',
      name: '边框布局',
      component: borderCmp,
    },
    {
      path: '/containerCmp',
      name: '容器测试',
      component: containerCmp,
    }, {
      path: '/formCmp',
      name: '表单测试',
      component: formCmp,
    }, {
      path: '/layoutJustifyCmp',
      name: 'layout基础布局justify对齐方式',
      component: layoutJustifyCmp,
    }, {
      path: '/layoutRowCmp',
      name: 'layout基础布局layoutRowCmp',
      component: layoutRowCmp,
    },
    {
      path: '/layoutGutterCmp',
      name: 'layout基础布局Gutter间隔配置',
      component: layoutGutterCmp,
    },
    {
      path: '/layoutGutterMixCmp',
      name: 'layout混合布局Gutter/span配置',
      component: layoutGutterMixCmp,
    },
    {
      path: '/layoutOffsetCmp',
      name: '列偏移',
      component: layoutOffsetCmp,
    },
    {
      path: '/layoutXsSmMdLgXl',
      name: '参照了 Bootstrap 的 响应式设计，响应式布局(预设了五个响应尺寸：xs、sm、md、lg 和 xl)',
      component: layoutXsSmMdLgXl,
    },
    {
      path: '/plotlyCmp',
      name: 'plotlyCmp',
      component: plotlyCmp,
    },  
  ],
})

export default router
